<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="6">
        <div
          style="
            font-size: large;
            text-align: center;
            font-weight: bold;
            width: 100px;
            height: 100px;
          "
        >
          <img
            style="
              margin-left: 100px;
              width: 100px;
              height: 100px;
              border: 5px solid #e3e4e5;
            "
            src="@/assets/logo/logo.png"
            alt="dark"
          />
        </div>
      </el-col>
      <el-col :span="10">
        <div
          style="
            display: inline-block;
            font-size: large;
            text-align: center;
            font-weight: bold;
            width: 100px;
            height: 100px;
          "
        >
          <el-input
            style="display: inline-table"
            placeholder="请输入搜索内容"
            v-model="searchContent"
            class="input-with-select search"
          >
            <el-button
              style="background-color: #e1251b; color: white; display: table"
              slot="append"
              @click="searchSku"
              >搜索</el-button
            >
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div
          style="
            display: inline-block;
            font-size: large;
            text-align: center;
            font-weight: bold;
            width: 100px;
            height: 100px;
          "
        >
          <div
            class="shopping-cart dropdown"
            @mouseover="mouseOver"
            @mouseleave="mouseLeave"
            :style="active"
          >
            <div
              style="margin-top: 10px; font-size: 14px"
              ref="acp"
              class="el-icon-shopping-cart-1"
            >
              购物车
            </div>

            <div style="margin-top: 10px" class="dropdown-content">
              <div v-for="(item, index) in this.shoppingCartList" :key="index">
                <div style="height: 60px; border: 1px solid blanchedalmond">
                  <div
                    style="
                      float: left;
                      height: 50px;
                      width: 50px;
                      margin-left: 5px;
                      margin-top: 5px;
                    "
                  >
                    <img
                      :src="item.skuDefaultImg"
                      style="width: 100%; height: 100%"
                      alt=""
                    />
                  </div>
                  <div
                    style="
                      float: left;
                      height: 50px;
                      width: 200px;
                      margin-left: 5px;
                      margin-top: 5px;
                      font-size: 12px;
                    "
                  >
                    {{ item.skuTitle }}
                  </div>
                  <div
                    style="
                      float: left;
                      height: 50px;
                      margin-left: 5px;
                      font-size: small;
                      margin-top: 5px;
                    "
                  >
                    <div style="width: 200px; text-align: left">
                      <span
                        class="el-icon-minus"
                        style="color: green; border: 1px black solid"
                        @click="
                          () => {
                            item.num--;
                            updateItem(item);
                          }
                        "
                      ></span>
                      {{ item.num }}
                      <span
                        class="el-icon-plus"
                        style="color: green; border: 1px black solid"
                        @click="
                          () => {
                            item.num = item.num + 1;
                            updateItem(item);
                          }
                        "
                      ></span>

                      <span style="color: red; margin-right: 0px">
                        ￥{{ item.price / 100 }}</span
                      >
                      ×{{ item.num }}
                    </div>

                    <button
                      style="float: right"
                      @click="
                        () => {
                          item.num = 0;
                          deleteItem(item);
                        }
                      "
                    >
                      删除
                    </button>
                    <br />
                    小计：<span style="color: red; margin-right: 0px"
                      >￥{{ (item.num * item.price) / 100 }}</span
                    >
                  </div>
                </div>
              </div>
              <button
                style="
                  float: right;
                  margin-right: 10px;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              >
                去结账
              </button>
              <div style="float: right; margin-right: 20px; margin-top: 10px">
                总计：<span style="color: red; margin-right: 0px"
                  >￥{{ getSum }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <div style="border: 1px solid red; margin-top: 100px"></div>
      <el-col :span="12">
        <div style="font-size: large; text-align: center; font-weight: bold">
          热门商品
        </div>
      </el-col>

      <el-col :span="12">
        <div style="font-size: large; text-align: center; font-weight: bold">
          猜你喜欢
        </div>
      </el-col>

      <el-col
        :span="12"
        class="card-box"
        style="
          background-color: lavender;
          border-radius: 5px;
          height: 300px;
          margin-top: 10px;
        "
      >
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item
            v-for="item in [
              require('../assets/images/sku/q.jpg'),
              require('../assets/images/sku/q2.jpg'),
              require('../assets/images/sku/q3.jpg'),
            ]"
            :key="item"
          >
            <img :src="item" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col
        :span="12"
        class="card-box"
        style="
          align-items: center;
          justify-content: center;
          text-align: center;
          background-color: blanchedalmond;
          border-radius: 5px;
          height: 300px;
          margin-top: 10px;
        "
      >
        <el-carousel indicator-position="outside" height="300px">
          <el-carousel-item
            v-for="(src, index) in [
              require('../assets/images/sku/w.jpg'),
              require('../assets/images/sku/w2.jpg'),
              require('../assets/images/sku/w3.jpg'),
            ]"
            :key="index"
          >
            <img :src="src" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </el-col>

      <el-col :span="18" class="card-box deploy-list">
        <div style="font-size: large; font-weight: bold">商品列表</div>

        <div v-for="(item, index) in skuList" :key="index">
          <div
            :ref="() => 'sku:' + item.skuId"
            style="
              display: inline-block;
              float: left;
              margin-left: 25px;
              margin-top: 10px;
              border-radius: 5px;
              height: 320px;
              width: 240px;
              border: 1px solid blanchedalmond;
              background-color: lavender;
            "
          >
            <img
              :src="item.skuDefaultImg"
              alt="dark"
              width="100%"
              height="65%"
            />
            <div style="text-align: left; color: red">
              <span>¥</span>
              <span style="font-size: 18px">{{ item.price / 100 }}</span>
            </div>
            <div style="text-align: left; color: #666; height: 45px">
              {{ item.skuTitle }}
            </div>

            <div style="text-align: right; position: relative; bottom: -10px">
              <input
                v-model="item.num"
                placeholder="数量"
                min="0"
                type="number"
                style="width: 80px"
              />

              <button
                style="margin-left: 20px; background-color: red; color: white"
                @click="
                  () => {
                    if (
                      item.num == 0 ||
                      item.num == undefined ||
                      item.num == null
                    ) {
                      item.num = 1;
                    }
                    addItem(item);
                  }
                "
              >
                加入购物车
              </button>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="6" class="card-box deploy-list">
        <div style="font-size: large; font-weight: bold">广告栏</div>

        <div style="margin-left: 80px" v-for="(item, index) in 5" :key="index">
          <div
            style="
              display: inline-block;
              border: 1px solid blanchedalmond;
              float: left;
              margin-left: 25px;
              margin-top: 10px;
              border-radius: 5px;
              height: 300px;
              width: 240px;
              background-color: lavender;
            "
          >
            <img
              src="@/assets/images/sku/mac2.jpg"
              alt="dark"
              width="100%"
              height="70%"
            />
            <div style="text-align: left; color: red">
              <span>¥</span>
              <span style="font-size: 18px">18999.00</span>
            </div>
            <div style="text-align: left; color: #666">
              Apple MacBook Pro 14英寸 M1 Pro芯片 16G 1T深空灰笔记本电脑
              MKGQ3CH/A
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getSkuListByStoreId,
  findShoppingCartItems,
  addShoppingCartItems,
  updateShoppingCartItems,
  removeShoppingCartItems,
} from '@/api/home/home';
import { getInfo } from '@/api/login';
export default {
  name: 'Index',
  dicts: ['application_type'],
  data() {
    return {
      shoppingCartId: undefined,
      currentStoreId: undefined,
      currentUserId: undefined,
      count: 0,
      searchContent: '',
      active: '',
      shoppingCartList: [],
      spuList: [],
      skuList: [],
      applicationTop: [],
      artifactTop: [],
    };
  },
  created() {
    this.init();
  },
  computed: {
    getSum: function () {
      let sum = 0;
      this.shoppingCartList.forEach((item) => {
        //遍历prodAllPrice这个字段，并累加
        sum += (item.num * item.price) / 100;
      });
      //返回
      return sum;
    },
  },
  methods: {
    searchSku() {
      const body = {
        storeId: {
          id: 123,
        },
        search: this.searchContent,
        pageSize: 10,
        pageNum: 1,
      };
      getSkuListByStoreId(body)
        .then((result) => {
          if (result.code == 200) {
            console.log(result.rows);
            this.skuList = result.rows;
          }
        })
        .catch((err) => {});
      console.log(this.skuList);
    },

    load() {
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
    getUserInfo() {
      getInfo()
        .then((res) => {
          if (res.code == 200) {
            console.log(res);

            const user = res.data.user;
            this.currentUserId = user.userId;
            console.log(this.currentUserId);

            let getCartItemParams = {
              userId: this.currentUserId,
              storeId: 123,
            };
            console.log(getCartItemParams);
            findShoppingCartItems(getCartItemParams)
              .then((result) => {
                if (result.code == 200) {
                  console.log(result);
                  this.shoppingCartList = result.data.shoppingItemResponseList;
                  this.shoppingCartId = result.data.shoppingCartId;
                  console.log(this.shoppingCartList);
                }
              })
              .catch((err) => {});
          }
        })
        .catch((error) => {});
    },
    init() {
      this.getUserInfo();
      const body = {
        storeId: {
          id: 123,
        },
        search: '',
        pageSize: 10,
        pageNum: 1,
      };
      getSkuListByStoreId(body)
        .then((result) => {
          if (result.code == 200) {
            console.log(result.rows);
            this.skuList = result.rows;
            this.currentStoreId = this.skuList[0].storeId;
          }
        })
        .catch((err) => {});
    },
    opsItem(item) {
      alert('添加到购物车' + item.num);
      alert('购物车' + this.shoppingCartList.push(item));
      // TODO 调用操作购物车的api
      // TODO 调用购物车的列表
    },
    addItem(item) {
      console.log(item);
      let addItemParams = {
        skuId: item.skuId,
        count: item.num,
        userId: this.currentUserId,
        storeId: this.currentStoreId,
      };
      console.log(addItemParams);
      addShoppingCartItems(addItemParams)
        .then((result) => {
          if (result.code == 200) {
            this.shoppingCartList = result.data.shoppingItemResponseList;
            this.shoppingCartId = result.data.shoppingCartId;
            console.log(this.shoppingCartList);
          }
        })
        .catch((err) => {});
    },
    updateItem(item) {
      console.log(item);
      let removeData = {
        shoppingCartId: parseInt(this.shoppingCartId),
        skuId: item.skuId,
        count: parseInt(item.num),
      };
      updateShoppingCartItems(removeData)
        .then((result) => {
          if (result.code == 200) {
            this.shoppingCartList = result.data.shoppingItemResponseList;
            this.shoppingCartId = result.data.shoppingCartId;
            console.log(this.shoppingCartList);
          }
        })
        .catch((err) => {});
    },
    deleteItem(item) {
      console.log(item);
      let removeData = {
        shoppingCartId: parseInt(this.shoppingCartId),
        skuIdList: [item.skuId],
      };
      removeShoppingCartItems(removeData)
        .then((result) => {
          if (result.code == 200) {
            this.shoppingCartList = result.data.shoppingItemResponseList;
            this.shoppingCartId = result.data.shoppingCartId;
            console.log(this.shoppingCartList);
          }
        })
        .catch((err) => {});
    },
    // 移入
    mouseOver() {
      this.active = 'border: 2px solid red;';
      // 操作dom 获取p标签改变其样式
      var acps = this.$refs.acp;
      acps.style.color = 'red';
    },
    // 移出
    mouseLeave() {
      this.active = '';
      this.$refs.acp.style = 'margin-top: 10px; font-size: 14px';
    },
    mouseSkuOver(refItem) {
      console.log(refItem);
      console.log(this.$refs);
      this.$refs[refItem].style = 'background-color:red';
    },
    mouseSkuLeave() {},
    // 打开加载层
    openLoading() {
      this.$modal.loading('正在加载数据，请稍候！');
    },
    goTarget(href) {
      window.open(href, '_blank');
    },
  },
};
</script>

<style scoped lang="scss">
.deploy-list {
  height: 550px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10px;
}
.table-height {
  height: 500px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 100px;
}
.property-stat {
  cursor: pointer;
  height: 180px;
  width: 180px;
  float: left;
  margin-left: 20px;
  font-size: large;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
}
.cmdb-stat {
  cursor: pointer;
  height: 130px;
  width: 20%;
  float: left;
  font-size: large;
  font-weight: bold;
  color: white;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.search {
  float: left;
  width: 600px;
  border: 2px solid red;
}
.shopping-cart {
  display: inline-table;
  float: left;
  width: 150px;
  text-align: center;
  vertical-align: middle;
  height: 40px;
  border: 1px solid #eee;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 480px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
